<template>
  <div>
    <van-nav-bar :title="shopinfo.goods_name" fixed placeholder>
      <template #left>
        <van-icon name="arrow-left" size="20" color="#666" @click="goback()" />
      </template>
      <template #right>
        <van-icon name="wap-nav" size="20" color="#666" />
      </template>
    </van-nav-bar>
    <van-row>
      <van-col span="22" offset="1">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f2f2f2">
          <van-swipe-item
            v-for="(item, index) in shopinfo.imgList"
            :key="index"
          >
            <van-image
              width="20rem"
              height="20rem"
              fit="contain"
              v-lazy
              :src="url + item.image_url"
            />
          </van-swipe-item>
        </van-swipe>
      </van-col>
    </van-row>
    <p class="price">￥{{ shopinfo.shop_price }}</p>
    <h3>{{ shopinfo.goods_name }}</h3>
    <p style="text-align: left; margin-left: 3%; color: #888">
      {{ shopinfo.goods_remark }}
    </p>
    <van-row>
      <van-col span="8">浏览次数：{{ shopinfo.click_count }}</van-col>
      <van-col span="8" offset="8">库存：{{ shopinfo.store_count }}</van-col>
    </van-row>
    <van-row>
      <van-col span="8"> 商品销量：{{ shopinfo.sales_sum }} </van-col>
      <van-col span="8" offset="8"
        >商品评论数：{{ shopinfo.comment_count }}</van-col
      >
    </van-row>

    <div class="fd">
      <div class="box" v-html="message"></div>
    </div>

    <div style="height: 6vh"></div>
    <div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addcarts"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      num:'1',
      list_id: "",
      message: "",
      shopinfo: [],
      url: "https://img.9lele.com",
    };
  },
  computed: {
    ...mapGetters(["infos"]),
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    click1() {
      this.message = this.escapeHtml(this.message);
    },
    escapeHtml(str) {
      var arrEntities = {
        lt: "<",
        gt: ">",
        nbsp: " ",
        amp: "&",
        quot: '"',
      };
      return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
        return arrEntities[t];
      });
    },
    getInfo() {
      let list_id = this.$route.query.id;
      this.$store.dispatch("apple/InFo", list_id).then((e) => {
        // console.log(e);
        this.shopinfo = e.data.data;
        this.message = e.data.data.goods_content;
        console.log(this.shopinfo);
        this.click1();
      });
    },
    addcarts() {
      let user = JSON.parse(localStorage.getItem("user"));
      let obj = {
        goods_id: this.shopinfo.goods_id,
        goods_name: this.shopinfo.goods_name,
        price: this.shopinfo.market_price,
        number: this.num,
        goods_img: this.shopinfo.original_img,
        remark: this.shopinfo.goods_remark,
        member_id: user.member_id,
      };
      console.log(obj)
      this.$store.dispatch("apple/AddCart", obj).then((e) => {
        console.log(e.data.data);
        this.$router.push("/cart");
      });
    },
  },
  created() {
    console.log(this.list_id);
    this.getInfo();
    // this.addcarts();
  },
};
</script>

<style>
.fd {
  font-size: 0.3rem;
  text-align: left;
}
img {
  width: 100%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 80px;
  text-align: center;
  /* background-color: #39a9ed; */
}
.price {
  /* height: vh; */
  text-align: left;
  margin-left: 3%;
  font-size: 25px;
  color: rgba(255, 38, 0, 0.808);
}
p:first-letter {
  font-size: 70%;
}
h3 {
  text-align: left;
  margin-left: 3%;
}
h1 {
  display: none;
}
/* @goods-action-height */
.van-goods-action {
  height: 60px;
}
.van-nav-bar .van-icon {
  color: #ef1726;
}
</style>